// 虚拟购物车数据
var carList = [
    { id: 5, name: '运动鞋', avatar: 'V1.jpg', price: 5000.50, count: 1, maxCount: 3 },
    { id: 8, name: '登山鞋', avatar: 'V2.jpg', price: 100.90, count: 10, maxCount: 10 },
    { id: 9, name: '滑冰鞋', avatar: 'V3.jpg', price: 150, count: 2, maxCount: 5 }
];
// 辅助全局变量
var tbody = document.querySelector('table.cart-list>tbody')
// 动态展示数据
var html = '';
carList.forEach(function (item) {
    html += `
        <tr data-id = "${item.id}">
            <td><input type="checkbox" class='checkbox'></td>
            <td><img src="${item.avatar}" alt="" srcset=""></td>
            <td>${item.name}</td>
            <td><span>￥${item.price}</span></td>
            <td>
                <input class="btn-decrease" type="button" value="-" ${item.count === 1 ? 'disabled' : ''}>
                <i>${item.count}</i>
                <input class="btn-increase" type="button" value="+" ${item.count === item.maxCount ? 'disabled' : ''}>
            </td>
            <td><input class="btn-remove" type="button" value="删除"></td>
        </tr>
    `;
});
tbody.innerHTML = html;
// 页面刷新，金额更新
updateTotal();
//事件委托处理 数量加减功能
tbody.onclick = function (e) {
    if (e.target.tagName !== 'INPUT') return;
    if (e.target.classList.contains('btn-decrease')) {
        decreaseHandler(e);

    } else if (e.target.classList.contains('btn-increase')) {
        increaseHandler(e);
    } else if (e.target.classList.contains('btn-remove')) {
        removeHandler(e);
    } else {
        checkHandler(e);
    }
};
function decreaseHandler(e) {
    // 找到每条商品的id
    var id = parseInt(e.target.parentNode.parentNode.dataset.id);
    // 让数组cartList中对应的购物记录count-1
    var target = carList.find(function (item) { return item.id === id });
    target.count -= 1;
    // 让表格中商品对应的数量-1
    // e.target.parentNode.querySelector('i').innerText = target.count;
    e.target.nextElementSibling.innerText = target.count;
    // 数量为1时，不能在减，应禁用
    if (target.count === 1) e.target.disabled = true;
    // 让+按钮取消禁用
    // e.target.parentNode.querySelector('input.btn-increase').disables = false;
    e.target.nextElementSibling.nextElementSibling.disabled = false;
    // 判断前面有没有勾选，如果有，需要更新总金额
    updateTotal();
    // 提示用户操作成功
    // alert('操作成功');
}
function increaseHandler(e) {
    var id = parseInt(e.target.parentNode.parentNode.dataset.id)
    // 让数组cartList中对应的购物记录count1
    var target = carList.find(function (item) { return item.id === id });
    target.count += 1;
    // 让表格中商品对应的数量+1
    e.target.previousElementSibling.innerText = target.count;
    // 数量为最大值时，不能在加，应禁用
    if (target.count === target.maxCount) e.target.disabled = true;
    // 让+按钮取消禁用
    e.target.previousElementSibling.previousElementSibling.disabled = false;
    // 判断前面有没有勾选，如果有，需要更新总金额
    updateTotal();
    // 提示用户操作成功
    // alert('操作成功');
}
function removeHandler(e) {
    var id = parseInt(e.target.parentNode.parentNode.dataset.id)
    // 删除数组cartList中对应的购物记录
    var i = carList.findIndex(function (item) { return item.id === id });
    carList.splice(i, 1);
    // 删除一行
    tbody.removeChild(e.target.parentNode.parentNode);
    // 总金额更新
    updateTotal();
    // 更新全选复选框的状态

    // 提示用户操作成功
    alert('删除成功');
}
function checkHandler(e) {
    var checked = e.target.checked;
    // 更新全选复选框的状态
    var unchecked = tbody.querySelectorAll('input.checkbox:not(:checked)');
    // 未选中的为0时，全选被选中
    document.querySelector('input.all').checked = unchecked.length === 0;
    // 总金额更新
    updateTotal();
};
// 点击全选，数据全部被选中
document.querySelector('input.all').onclick = function () {
    tbody.querySelectorAll('input.checkbox').forEach(function (item) {
        item.checked = this.checked;
        // item.checked = e.target,checked;
    }, this);
    // 总金额更新
    updateTotal();
};
//批量删除
/* document.querySelector('input.removeChecked').onclick = function (e) {

}; */
function updateTotal() {
    // 1.将每条购物记录的id放到一个数组中
    var checkedIds = [];
    tbody.querySelectorAll('input.checkbox:checked').forEach(function (item) {
        var checkedId = parseInt(item.parentNode.parentNode.dataset.id)
        checkedIds.push(checkedId);
    });
    // 2.遍历所有的购物记录，求出购物记录累加的总金额
    var total = 0;
    carList.forEach(function (item) {
        if (checkedIds.indexOf(item.id) !== -1) {
            total += item.price * item.count;
        }
    });
    // 3.将总金额显示在指定的标签中
    document.querySelector('span.total').innerText = total;
};